.btn {
  background: none;
  outline: none;
  border: none;
  color: #40454e;
  transition: color 200ms;
  position: relative;
  white-space: nowrap;

  &:hover {
    cursor: pointer;
    color: white;
  }

  &:disabled {
    color: #2240454e;
    cursor: default;
    filter: grayscale(1);
  }

  &>.btn_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    fill: red
  }

  &>.back_decorator {
    z-index: 0;
  }
}

/*********************[start] btn_kind_underline**************************/

.btn_kind_underline .back_decorator {
  background-color: #00000044;
  bottom: 0px;
  left: 2px;
  right: 2px;
  height: 1px;
  position: absolute;
  transition: all 200ms;
}

.btn_kind_underline:hover:not(:disabled) .back_decorator {
  background-color: #00000088;
  height: 100%;
  border-radius: 2px;
  left: 0px;
  right: 0px;
}

.btn_kind_underline:active .back_decorator {
  background-color: #000000FF;
}

.btn_kind_underline:disabled .back_decorator {
  background-color: #2240454e;
}

/*********************[end] btn_kind_underline**************************/



/*********************[start] btn_kind_icon**************************/
.btn_kind_icon {
  padding: 0px;
  display: inline-flex;
  align-self: center;
  justify-content: center;
}

.btn_kind_icon>span {
  display: inline-block;
  text-align: center;
}

.btn_kind_icon .back_decorator {
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 0px;
  position: absolute;
  transition: all 200ms;
}

.btn_kind_icon:hover:not(:disabled) .back_decorator {
  background-color: #00000088;
  height: 100%;
  border-radius: 2px;
  left: 0px;
  right: 0px;
}

.btn_kind_icon:active .back_decorator {
  background-color: #000000FF;
}

.btn_kind_icon:disabled .back_decorator {
  background-color: #2240454e;
}

.btn_kind_normal .back_decorator {
  bottom: 0px;
  left: 2px;
  right: 2px;
  height: 1px;
  position: absolute;
  transition: all 200ms;
}

.btn_kind_normal:hover:not(:disabled) .back_decorator {
  background-color: #00000088;
  height: 100%;
  border-radius: 2px;
  left: 0px;
  right: 0px;
}

.btn_kind_normal:active .back_decorator {
  background-color: #000000FF;
}

.btn_kind_normal:disabled .back_decorator {
  background-color: #2240454e;
}

/*********************[end] btn_kind_normal**************************/

.btn_kind_icon.btn_size_s {
  height: 15px;
  width: 15px;
  line-height: 15px;
}

.btn_kind_icon.btn_size_m {
  height: 37px;
  width: 37px;
  line-height: 37px;
}

.btn_kind_icon.btn_size_l {
  height: 37px;
  width: 37px;
  line-height: 37px;
}


.btn_kind_underline.btn_size_s,
.btn_kind_normal.btn_size_s {
  padding: 0px 2px;
}

.btn_kind_underline.btn_size_m,
.btn_kind_normal.btn_size_m {
  padding: 5px 10px;
}

.btn_kind_underline.btn_size_l,
.btn_kind_normal.btn_size_l {
  padding: 10px 15px;
}

.btn_delete_line {
  filter: grayscale(1);
}